<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>关系选择器</title>
        <style>
            div>p{color:red;}
            p+div{color:blue;}
            p~div{background-color: pink;}
            #div1>p{background-color: aquamarine;}
        </style>
    </head>
    <body>
       <div id="div1">
            <div id="children1">children1</div>
            <p id="children2">children2</p>
            <div id="children3">children3</div>
       </div>
       <div id="div2">
            <p id="children4">children4</p>
            <div id="children5">children5</div>
            <div id="children6">children6</div>
       </div>
       <p>p元素</p>
    </body>
</html>